/**
 * 画板列表 created to by doujiabao
 */

import React, { Component } from 'react'

import styles from './index.module.styl'

import http from '@/service/fetch'
import moment from 'moment'

import {
    Table,
    Button,
    Modal,
    message,
} from 'antd'
import Breadcrumb from '@/components/Breadcrumb'

const { confirm } = Modal

class Drawing extends Component {

    state = {
        data: []
    }

    componentDidMount() {
        this.fetchListData()
    }

    fetchListData = () => {
        http.drawingList().then(res => {
            if (res.code === 200) {
                this.setState({
                    data: res.data.map((itm, idx) => {
                        itm.key = idx
                        return itm
                    })
                })
            }
        }).catch(err => {
            console.log(err)
        })
    }

    handleWorksDel = (record) => {
        const that = this
        confirm({
            title: `确认删除?`,
            onOk() {
                return new Promise((resolve, reject) => {
                    http.drawingDel({
                        id: record.id
                    }).then(res => {
                        message.success(res.data)

                        that.fetchListData()

                        resolve(res)
                    }).catch(err => {
                        reject(err)
                    })
                })
            }
        })
    }

    render() {

        const {
            data
        } = this.state

        const columns = [
            {
                title: '作品id',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: '作品名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '作品',
                dataIndex: 'src',
                key: 'src',
                render: v => {
                    return <img className={styles.works} src={v} alt='作品' />
                }
            },
            {
                title: '发布时间',
                dataIndex: 'time',
                key: 'time',
                render: v => {
                    return moment(+v * 1000).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                render: (val, record, index) => {
                    return <Button onClick={() => { this.handleWorksDel(record) }} danger>删除</Button>
                }
            },
        ]

        return (<div>
            <Breadcrumb
                pathSnippets={[
                    '画板管理',
                    '画板列表'
                ]}
                className={styles.breadcrumb}
            />
            <Table dataSource={data} columns={columns} />
        </div>)

    }

}

export default Drawing